/*
 * @Description: 修改映射
 * @Author: Zzt
 * @Date: 2023-01-11 15:20:40
 * @LastEditTime: 2023-01-16 16:20:10
 */
import { delItemById } from '@/utils/list';
import { Button, Form, Modal, Space, Steps } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import { useMappingRelationContext } from '../../contexts/MappingRelationContext';
import BaseList from './BaseList';
import FieldMatch from './FieldMatch';

const { Step } = Steps;

const EditMappingList = (props: any) => {
  const [form] = Form.useForm();
  const { visible, onClose, data } = props;
  const { editTAT, selectAT, targetItems } = useMappingRelationContext();
  // 字段匹配数据
  const [template, setTemplate] = useState([]);
  const [levelList, setLevelList] = useState([]);

  useEffect(() => {
    form.setFieldsValue({ ...data });
  }, [visible]);
  useEffect(() => {
    if (data) {
      setTemplate(data.templateMetadataMapRelations);
    }
  }, [data]);

  useEffect(() => {
    if (JSON.stringify(selectAT) !== '{}') {
      setLevelList(delItemById(0, selectAT.levelList, 'level'));
    }
  }, [selectAT]);
  /**
   * @description: 关闭弹窗
   */
  const onCancel = () => {
    onClose();
  };

  const onFinish = (value: any) => {
    editTAT({ ...data, ...value, templateMetadataMapRelations: template }).then(onCancel());
    console.log('value', { ...data, ...value, templateMetadataMapRelations: template });
  };
  return (
    <Modal
      title={`${selectAT?.atName}与档案类型的映射关系`}
      visible={visible}
      width={700}
      maskClosable={false}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
        <Button key="finish" type="primary" onClick={() => form.submit()}>
          完成
        </Button>
      ]}
    >
      <Form
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        labelAlign="left"
        form={form}
        onFinish={onFinish}
      >
        <BaseList form={form} data={data} title={selectAT?.atName} />
        {useMemo(
          () => (
            <FieldMatch updateTemplate={setTemplate} tplData={template} levelList={levelList} />
          ),
          [template, targetItems, levelList]
        )}
      </Form>
    </Modal>
  );
};
export default EditMappingList;
